@extends('admin.layouts.head')

@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('admin.layouts.navbar')
        @include('admin.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item active" aria-current="page">系统配置</li>
                            </ol>
                        </nav>
                        @verbatim
                        <div class="card">
                            <div class="card-body">

                                <div id="vueApp">
                                    <div class="content-box">
                                        <el-row :gutter="20">
                                            <el-col :span="3">首页banner:</el-col>
                                            <el-col :span="10">
                                                <el-upload
                                                    class="avatar-uploader"
                                                    action="/admin/games/uploadImg"
                                                    :show-file-list="false"
                                                    with-credentials
                                                    :on-success="uploadSuccess"
                                                >
                                                    <img v-if="configInfo.index_banner" :src="configInfo.index_banner" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                </el-upload>
                                            </el-col>
                                            <el-col :span="5">
                                                <el-button type="primary" @click="saveConfig('index_banner')">保存</el-button>
                                            </el-col>
                                        </el-row>

                                        <div style="height: 20px;"></div>
                                        <el-row :gutter="20">
                                            <el-col :span="3">兑换金额设置:</el-col>
                                            <el-col :span="10">
                                                <el-input v-model="configInfo.dh_balance"></el-input>
                                            </el-col>
                                            <el-col :span="5">
                                                <el-button type="primary" @click="saveConfig('dh_balance')">保存</el-button>
                                            </el-col>
                                        </el-row>

                                        <div style="height: 20px;"></div>
                                        <el-row :gutter="20">
                                            <el-col :span="3">邀新奖励首次比例:</el-col>
                                            <el-col :span="10">
                                                <el-input v-model="configInfo.yx_new_rate"></el-input>
                                            </el-col>
                                            <el-col :span="5">
                                                <el-button type="primary" @click="saveConfig('yx_new_rate')">保存</el-button>
                                            </el-col>
                                        </el-row>
                                        <div style="height: 20px;"></div>
                                        <el-row :gutter="20">
                                            <el-col :span="3">邀新奖励非首次比例:</el-col>
                                            <el-col :span="10">
                                                <el-input v-model="configInfo.yx_old_rate"></el-input>
                                            </el-col>
                                            <el-col :span="5">
                                                <el-button type="primary" @click="saveConfig('yx_old_rate')">保存</el-button>
                                            </el-col>
                                        </el-row>
                                        <div style="height: 20px;"></div>
                                        <el-row :gutter="20">
                                            <el-col :span="3">会员等级活动5日领取过期天数:</el-col>
                                            <el-col :span="10">
                                                <el-input v-model="configInfo.five_day_expire"></el-input>
                                            </el-col>
                                            <el-col :span="5">
                                                <el-button type="primary" @click="saveConfig('five_day_expire')">保存</el-button>
                                            </el-col>
                                        </el-row>
                                        
                                        <div style="height: 20px;"></div>
                                        <el-row :gutter="20">
                                            <el-col :span="3">成长值每日掉点数:</el-col>
                                            <el-col :span="10">
                                                <el-input v-model="configInfo.growth"></el-input>
                                            </el-col>
                                            <el-col :span="5">
                                                <el-button type="primary" @click="saveConfig('growth')">保存</el-button>
                                            </el-col>
                                        </el-row>

                                    </div>

                            </div> <!-- .card-body -->
                        </div> <!-- .card -->
                        @endverbatim
                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->

    @include('admin.layouts.vuehead')

    <script>
        const vueApp = new Vue({
            el: '#vueApp',
            data() {
                return {
                    configInfo: {},
                }
            },
            mounted() {
                this.getConfigList()
            },
            watch: {

            },
            methods: {
                getConfigList() {
                    adminApi_getConfig().then(res => {
                        this.configInfo = res.data
                    })
                },
                saveConfig(key) {
                    adminApi_setConfig({key, value: this.configInfo[key]}).then(res => {
                        this.$message.success('保存成功')
                        this.getConfigList()
                    }).catch(err => {
                        this.$message.error(err.message)
                    })
                },
                uploadSuccess(res, file) {
                    this.configInfo.index_banner = '/uploads/'+res.path
                },
            },
        })
    </script>
    </body>


    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 256px;
            height: 108px;
            display: block;
        }
        .el-row {
            align-items: center;
        }
    </style>
@endsection
